<div class="col-md-12">
    <section class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-search form-inline" >
                <div class="input-group">
                    <span class="input-group-addon" ng-hide="vm.queryParams.name">用户名：</span>
                    <input class="form-control" style="float:left;width:200px" ng-model="vm.queryParams.user_name" ui-keydown="{'enter': 'vm.search()'}" placeholder="">
                </div>
                <div class="input-group btn-group" style="float: right;">
                    <button type="button" class="btn btn-primary" ng-click="vm.register()">
                        <i class="fa fa-fw fa-plus"></i>添加
                    </button>
                </div>
                <div class="input-group" style="float: right;margin-right: 10px;">
                    <button type="button" class="btn btn-primary" ng-click="vm.search()">
                        <i class="fa fa-fw fa-search"></i>查询
                    </button>
                </div>
            </div>
        </div>
        <table class="am-fade-and-scale table table-hover" >
            <thead>
            <tr>
                <th style="width: 30%" ng-click="vm.sorter.reorder('user_name')">
                    用户名 <i class="text-info fa fa-fw" ng-show="vm.sorter.order === 'user_name'" ng-class="{'fa-sort-down': vm.sorter.reverse, 'fa-sort-up': !vm.sorter.reverse}"></i>
                </th>
                <th style="width: 25%;" ng-click="vm.sorter.reorder('userType')">
                    角色<i class="text-info fa fa-fw" ng-show="vm.sorter.order === 'userType'" ng-class="{'fa-sort-down': vm.sorter.reverse, 'fa-sort-up': !vm.sorter.reverse}"></i>
                </th>
                <th style="width: 30%;" ng-click="vm.sorter.reorder('lastLoginTime')">
                    最后登录时间<i class="text-info fa fa-fw" ng-show="vm.sorter.order === 'lastLoginTime'" ng-class="{'fa-sort-down': vm.sorter.reverse, 'fa-sort-up': !vm.sorter.reverse}"></i>
                </th>
                <th style="width: 15%;">操作</th>
            </tr>
            </thead>
            <tbody class="text-muted">
            <tr ng-repeat="user in vm.users | orderBy : vm.sorter.order : vm.sorter.reverse track by $index">
                <td ng-bind="::user.user_name | readable"></td>
                <td ng-bind="::user.user_type | readable"></td>
                <td ng-bind="::user.last_login_time | date:'yyyy-MM-dd HH:mm:ss'"></td>
                <td>
                    <a ng-click="vm.update(user)">修改</a> |
                    <a ng-click="vm.delete(user)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
        <!-- 页面分页信息 -->
        <div class="panel-footer text-center">
            <uib-pagination class="pagination-sm" ng-model="vm.queryParams.page" ng-change="vm.search()" total-items="vm.totalItems" max-size="vm.queryParams.size"></uib-pagination>
        </div>
    </section>
</div>

<div>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h4 class="modal-title">是否确认删除该用户？</h4>
        </div>

        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">确认</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">取消</button>
        </div>
    </script>
</div>